import React, { useEffect, useState } from 'react';
import { Row, Space } from "antd"
import ShowCard from './components/ShowCard';
import Arrow from './components/Arrow/Arrow'
import ArrowCenter from './components/Arrow/ArrowCenter'
import ArrowLine from './components/Arrow/ArrowLine'

const Observation = () => {
  const obsData = {
    "status_code": 0,
    "status_msg": "请求成功！",
    "data": {
      "observe_unit_data": [
        {
          "unit_name": "unit-name",
          "route_rule": {
            "type": "range/equal",
            "value": "[100,200]",
            "rate": "100%"
          },
          "access_info": {
            "name": "接入层name-A",
            "type": "MSFE"
          },
          "application_info": {
            "name": "app-A",
            "total": "10",
            "flow_unit": [
              "db-A",
              "db-B"
            ]
          },
          "database_info": {
            "name": "db-A",
            "db_total": [
              {
                "type": "hxredis",
                "total": 3
              },
              {
                "type": "hxmysql",
                "total": 3
              }
            ]
          }
        },
        {
          "unit_name": "unit-name",
          "route_rule": {
            "type": "range/equal",
            "value": "[100,200]",
            "rate": "100%"
          },
          "access_info": {
            "name": "接入层name-B",
            "type": "MSFE"
          },
          "application_info": {
            "name": "app-B",
            "total": "10",
            "flow_unit": [

            ]
          },
          "database_info": {
            "name": "db-B",
            "db_total": [
              {
                "type": "hxredis",
                "total": 3
              },
              {
                "type": "hxmysql",
                "total": 3
              }
            ]
          }
        }
      ]
    }
  }
  return (
    <div style={{ position: "relative", paddingTop: 60}}>
      <div style={{ position: "absolute", width: 300, height: 100, top: 16, left: "50%", transform: "translateX(-50%)", background: "#fff", zIndex: 10}}>
      <ShowCard
          boxStyle={{
            width: "100%",
            height: "100%",
          }}
          img={<>图片</>}
          title={<span>终端用户</span>}
          content={null}
        />
      </div>
      
      <div style={{ width: "100%", height: 700, position: "relative", border: "1px solid #eee", display: "flex", justifyContent: "space-between" }}>    
        {
          obsData.data.observe_unit_data.map((item, index) => (
            <div style={{ width: "40%", display: "flex", flexDirection: "column", alignItems: "center", marginTop: 10 }}>
              <Arrow 
                direction={index == 0 ? "left": "right"} 
                style={{ transform: index == 0 ? "translate(calc(50% - 8px))" : "translate(calc(-50% + 8px))"}}
                rate={item.route_rule.rate}
                info={(<Space direction="vertical">
                  <span>{item.route_rule.type}:{item.route_rule.value}</span>
                  <span>容灾单元名:{item.unit_name}</span>
                </Space>)}
                />
              <div style={{ border: "1px solid #eee", display: "flex", flexDirection: "column", alignItems: "center", width: "100%", padding: "20px 0"}}>
              <ShowCard
                boxStyle={{
                  width: 360,
                  height: 100,
                }}
                img={<>图片</>}
                title={<span>接入层/{item.access_info.type}</span>}
                content={(<span>名称: {item.access_info.name}</span>)}
              />
              <ArrowCenter arrow={true} />
              <ShowCard
                boxStyle={{
                  width: 360,
                  height: 100,
                }}
                img={<>图片</>}
                title={<span>应用实例</span>}
                content={(
                  <>
                    <span>实例名称: {item.application_info.name}</span>
                    <span>该单元实例总数: {item.application_info.total}</span>
                  </>
                )}
              />
              <ArrowCenter arrow={false} />
              <ArrowCenter arrow={item.application_info.flow_unit.includes(item.database_info.name) ? true : null} />
              <ShowCard
                boxStyle={{
                  width: 360,
                  height: 100,
                }}
                img={<>图片</>}
                title={<span>数据层</span>}
                content={(
                  <>
                    <span>名称: {item.database_info.name}</span>
                    <span>共有 {(item.database_info.db_total || []).map(j => (<span>{j.type} {j.total}个</span>))}</span>
                  </>
                )}
              />
              </div>
            </div>
          ))
        }
      </div>
      <ArrowLine style={{
          width: "60%",
          position: "absolute",
          left: "50%",
          transform: "translateX(-50%)",
          top: 470,
          zIndex: 10
        }}/>
    </div>
  );
};

export default Observation;
